<!--
 * @Descripttion: 订单管理
 * @version:
 * @Author: lhl
 * @Date: 2024-09-02 20:22:15
 * @LastEditors: lhl
 * @LastEditTime: 2024-09-08 21:14:53
-->
<template>
  <div>
    <h1>我的列表</h1>
    <RefreshList
      :apiFn="API.agent.getAgentList"
      :extra="form"
      ref="reshListRef"
    >
      <template #finished>我加载完毕了哈哈哈哈哈哈哈哈哈</template>
      <template #search>
        <van-search
          v-model="form.agentNo"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="onSearch">搜索</div>
          </template>
          <template #left>
            <div @click="onReset">重置</div>
          </template>
        </van-search>
      </template>
      <!-- 下拉提示，通过 scale 实现一个缩放效果 -->
      <template #pulling="props">
        <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
          :style="{ transform: `scale(${(props as any).distance / 80})` }"
        />
      </template>

      <!-- 释放提示 -->
      <template #loosing>
        <img
          class="doge"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/doge.png"
        />
      </template>
      <!-- 内容插槽 -->
      <template #default="{ data }">
        <!-- 自定义列表项 -->
        <van-cell
          v-for="(item, index) in data"
          :key="item.agentNo"
          :title="item.agentNo + '下标是：' + index"
        />
      </template>
    </RefreshList>
  </div>
</template>

<script setup lang="ts">
import API from '@/api';
import RefreshList from '@/components/refreshList/RefreshList.vue';

const form = ref({
  agentNo: ''
});

const reshListRef = ref<typeof RefreshList | null>(null);

const onSearch = () => {
  reshListRef.value?.onSearch();
};

const onReset = () => {
  form.value = {
    agentNo: ''
  };
  reshListRef.value?.onReset();
};
</script>

<style lang="less" scoped>
h1 {
  // 渐变
  display: flex;
  align-items: center;
  border-radius: 5px;
  box-shadow: inset 0 -1px 0 #e9e9e9;
  transform: rotate(0deg);
  background-image: linear-gradient(to bottom, #f5f5f5, #e9e9e9);
}
</style>
